<template>
  <basic-container>
    <div style="padding-bottom:20px;border-bottom:3px solid #eee;margin-bottom:20px;">
      <h2 class="topArea">钱包余额</h2>
      <div style="display:flex;align-items:center;">
        <div style="margin-right:30px;">
          <span style="font-size:30px;font-weight:bold;">￥</span>
          <span style="font-size:20px;">{{yue}}</span>
        </div>
        <div>
          <el-button type="primary" @click="inputCash" style="margin-right:30px;">充 值</el-button>
          <el-button type="primary" @click="outputCash">提 现</el-button>
        </div>
      </div>
    </div>

    <div>
      <el-tabs type="border-card" @tab-click="getContentList">
        <el-tab-pane label="充值">
          <el-table :data="tableData1" style="width: 100%" border>
            <el-table-column prop="chargeName" label="交易说明"></el-table-column>
            <el-table-column prop="price" label="金额"></el-table-column>
            <el-table-column prop="time" label="时间"></el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            style="text-align:right;margin-top:15px;"
          ></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="提现">
          <el-table :data="tableData2" style="width: 100%" border>
            <el-table-column prop="date" label="交易说明"></el-table-column>
            <el-table-column prop="name" label="金额"></el-table-column>
            <el-table-column prop="address" label="时间"></el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            style="text-align:right;margin-top:15px;"
          ></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="盈利">
          <el-table :data="tableData3" style="width: 100%" border align="center">
            <el-table-column prop="cashName" label="交易说明" align="center"></el-table-column>
            <el-table-column prop="remark" label="内容" align="center"></el-table-column>
            <el-table-column prop="price" label="金额" align="center"></el-table-column>
            <el-table-column prop="time" label="时间" align="center"></el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            style="text-align:right;margin-top:15px;"
          ></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="支出">
          <el-table :data="tableData4" style="width: 100%" border>
            <el-table-column prop="cashName" label="交易说明"></el-table-column>
            <el-table-column prop="remark" label="内容"></el-table-column>
            <el-table-column prop="price" label="金额"></el-table-column>
            <el-table-column prop="time" label="时间"></el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            style="text-align:right;margin-top:15px;"
          ></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="退还">
          <el-table :data="tableData5" style="width: 100%" border>
            <el-table-column prop="cashName" label="交易说明"></el-table-column>
            <el-table-column prop="remark" label="内容"></el-table-column>
            <el-table-column prop="price" label="金额"></el-table-column>
            <el-table-column prop="time" label="时间"></el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            style="text-align:right;margin-top:15px;"
          ></el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 充值对话框 -->
    <el-dialog title="充值" :visible.sync="dialogVisible" width="30%">
      <div>
        <div>
          <p>账号：</p>
          <div style="display:flex;align-items:center;">
            <img
              src="../../../public/img/bg/vip4.png"
              alt
              style="width:40px;height:40px;margin-right:10px;"
            />
            <span style="font-size:20px;">校谱书院</span>
          </div>
        </div>
        <div>
          <p>充值方式：</p>
          <div style="display:flex;align-items:center;">
            <div
              style="display:flex;align-items:center;border:1px solid #999;margin-right:50px;padding:15px 20px;"
              :class="{'actives':isSelect}"
              @click="changeType"
            >
              <img
                src="../../../public/img/bg/zfb.png"
                alt
                style="width:50px;height:50px;margin-right:10px;"
              />
              <span>支付宝</span>
            </div>
            <div
              style="display:flex;align-items:center;border:1px solid #999;padding:15px 20px;"
              :class="{'actives':!isSelect}"
              @click="changeType"
            >
              <img
                src="../../../public/img/bg/wx.png"
                alt
                style="width:50px;height:5s0px;margin-right:10px;"
              />
              <span>微信</span>
            </div>
          </div>
        </div>

        <div>
          <p>充值金额：</p>
          <div style="display:flex;align-items:center;">
            <div style="display:flex;align-items:center;margin-right:100px">
              <el-input placeholder="最少100起充" type="number" v-model="cashs"></el-input>
              <span>￥</span>
            </div>
            <div>
              <img
                src="http://ings-aisoft.com/xiaopu/target/classes/static/wx000000.png"
                alt
                style="width:100px;height:100px;margin-right:10px;"
              />
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>
<script>
import {
  getRecharge,
  getWithdrawal,
  getEarnings,
  getExpenses,
  getBacks,
  getCashCount,
  aliPay,
  wechartPay
} from "@/api/tool/cash";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      form: {},
      dialogVisible: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      cashs: 100,
      isSelect: true,
      tableData1: [],
      tableData2: [],
      tableData4: [],
      tableData5: [],
      tableData3: [],
      selectionList: [],
      option: {
        tip: false,
        border: true,
        index: true,
        viewBtn: true,
        selection: true,
        columnBtn: false,
        refreshBtn: false,
        searchBtn: false,
        editBtn: false,
        column: [
          {
            label: "公告标题",
            prop: "title",
            row: true,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入通知标题",
                trigger: "blur"
              }
            ]
          },
          {
            label: "通知类型",
            type: "select",
            row: true,
            dicUrl: "/api/blade-system/dict/dictionary?code=notice",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            slot: true,
            prop: "category",
            search: true,
            rules: [
              {
                required: true,
                message: "请输入通知类型",
                trigger: "blur"
              }
            ]
          },
          {
            label: "通知时间",
            prop: "releaseTimeRange",
            type: "datetimerange",
            format: "yyyy-MM-dd hh:mm:ss",
            valueFormat: "yyyy-MM-dd hh:mm:ss",
            hide: true,
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入通知时间",
                trigger: "blur"
              }
            ]
          },
          {
            label: "通知日期",
            prop: "releaseTime",
            type: "date",
            format: "yyyy-MM-dd hh:mm:ss",
            valueFormat: "yyyy-MM-dd hh:mm:ss",
            rules: [
              {
                required: true,
                message: "请输入通知日期",
                trigger: "blur"
              }
            ]
          },
          {
            label: "通知内容",
            prop: "content",
            span: 24,
            minRows: 6,
            type: "textarea"
          }
        ]
      },
      data: [],
      currentPage: 1,
      currentLabel: "充值",
      yue: "",
      QRcode: ""
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.notice_add, false),
        viewBtn: this.vaildData(this.permission.notice_view, false),
        delBtn: this.vaildData(this.permission.notice_delete, false),
        editBtn: this.vaildData(this.permission.notice_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  mounted() {
    this.dataInit("充值");

    getCashCount().then(res => {
      // console.log("钱包余额");
      // console.log(res);
      this.yue = res.data.data.balance;
    });
  },
  methods: {
    changeType() {
      this.isSelect = !this.isSelect;
    },
    inputCash() {
      this.dialogVisible = true;
      // 支付宝
      var product = {
        subject: "充值",
        totalFee: 0.01
      };

      // 微信
      var product1 = {
        body: "充值",
        totalFee: 0.01 * 100
      };
      aliPay(product).then(res => {
        console.log("支付宝");
        console.log(res);
      });
      // wechartPay(product).then(res => {
      //   console.log("微信支付");
      //   console.log(res.data.data);
      //   let QRcode = res.data.data;
      //   this.QRcode = QRcode;
      // });
    },
    outputCash() {
      this.$router.push({ path: "/tool/withdraw" });
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.currentPage = 1;
      this.dataInit(this.currentLabel);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.page.pageSize = 10;
      this.dataInit(this.currentLabel);
    },
    getContentList(tab, action) {
      console.log(tab.label);
      this.dataInit(tab.label);
      this.currentLabel = tab.label;
      this.page.total = 0;
    },
    dataInit(val) {
      if (val == "充值") {
        getRecharge(this.page.currentPage, this.page.pageSize).then(res => {
          console.log(res);
          this.tableData1 = res.data.data.records;
          this.page.total = res.data.data.total;
        });
      }
      if (val == "提现") {
        getWithdrawal(this.page.currentPage, this.page.pageSize).then(res => {
          console.log(res);
          this.tableData2 = res.data.data.records;
          this.page.total = res.data.data.total;
        });
      }

      if (val == "盈利") {
        getEarnings(this.page.currentPage, this.page.pageSize).then(res => {
          console.log(res);
          this.tableData3 = res.data.data.records;
          this.page.total = res.data.data.total;
        });
      }
      if (val == "支出") {
        getExpenses(this.page.currentPage, this.page.pageSize).then(res => {
          console.log(res);
          this.tableData4 = res.data.data.records;
          this.page.total = res.data.data.total;
        });
      }

      if (val == "退还") {
        getBacks(this.page.currentPage, this.page.pageSize).then(res => {
          console.log(res);
          this.tableData5 = res.data.data.records;
          this.page.total = res.data.data.total;
        });
      }
    }
  }
};
</script>
<style lang='scss' >
.topArea {
  border-bottom: 3px solid #f5f5f5;
  padding-bottom: 20px;
}
.actives {
  position: relative;
  &:after {
    content: "";
    background: url("../../../public/img/bg/right.png") no-repeat;
    position: absolute;
    width: 20px;
    height: 30px;
    right: 5px;
    bottom: 0;
    z-index: 10;
    background-size: cover;
  }
  border: 1px solid #d81e06 !important;

  //   background-size: 20px 20px;
}
</style>
